<template>
  <PageWrapper title="错误重试">
    <Row :gutter="16">
      <Col :span="8">
        <Card title="Axios 错误重试">
          <a-button @click="handleClick" type="primary">
            点击会重新发起请求5次
          </a-button>
          <div class="mt-4">
            打开浏览器的 network 面板，可以看到发出了六次请求
          </div>
        </Card>
      </Col>
      <Col :span="8">
        <Card title="hooks 错误重试">
          <Space>
            <a-button @click="restRun" type="primary" :disabled="loading">
              使用 hooks 发起重试
            </a-button>
            <a-button @click="restCancel">取消</a-button>
          </Space>
          <div class="mt-4">
            错误重试，retryInterval 如果不设置，默认采用简易的指数退避算法，取
            1000 * 2 ** retryCount，也就是第一次重试等待 2s，第二次重试等待
            4s，以此类推，如果大于 30s，则取 30s
          </div>
        </Card>
      </Col>
    </Row>
  </PageWrapper>
</template>

<script lang="ts" setup>
import { PageWrapper } from "@/components/Page";
import { useRequest } from "@vben/hooks";
import { testRetry } from "@/api/sys/user";
import { Card, Col, Row, Space, message } from "ant-design-vue";

// @ts-ignore
const handleClick = async () => {
  await testRetry();
};

function apiError() {
  return new Promise<void>((resolve, reject) => {
    setTimeout(() => {
      reject(`TimeError: ${Date.now()}`);
    }, 1300);
  });
}

// PS >> useRequest 代替不了API(如: axios)，但它使得开发更灵活

// 使得重试不再局限于 API 请求，兼容扩展和继续封装
// 继续封装，如：useRequest 第一个参数，可以嵌套多个异步函数
// 兼容扩展，如：同时启用防抖、节流、loading状态、取消异步等功能

// eg. 仅仅为了计数，restRun、restCancel 其实都可省略
let i = 0;
const { loading, run, cancel } = useRequest(apiError, {
  manual: true,
  retryCount: 5,
  // retryInterval: undefined, // 重试时间间隔，单位为毫秒
  onError(error) {
    if (i === 0) {
      message.error(`发现错误`);
      i++;
    }
    const now = Date.now();
    message.error(`第 ${i++} 次重试, Time:${now}`);
    console.log(`Time: ${now}, Error: ${error}`);
  },
});
const restRun = () => {
  i = 0;
  run();
};
const restCancel = () => {
  i = 0;
  cancel();
  message.info("已取消");
};
</script>
